<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯系统监控</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .elevator-monitor {
            padding: 20px;
        }

        .param-card {
            margin-bottom: 20px;
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .status-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .status-item .icon {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
        }

        .status-item .label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .status-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .status-item .unit {
            color: #909399;
            font-size: 12px;
        }

        .chart-container {
            height: 400px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .maintenance-card {
            background: #fff5e6;
            border-left: 4px solid #e6a23c;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
        }

        .maintenance-title {
            color: #e6a23c;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .maintenance-info {
            color: #666;
            font-size: 14px;
        }

        .data-record {
            padding: 20px;
        }

        .record-card {
            margin-bottom: 20px;
        }

        .time-selector {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="elevator-system">
        <el-tabs v-model="activeTab">
            <!-- 状态监控标签页 -->
            <el-tab-pane label="状态监控" name="monitor">
                <div class="elevator-monitor">
                    <!-- 运行状态显示 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>电梯运行状态</span>
                        </div>
                        <div class="status-grid">
                            <div class="status-item" v-for="elevator in elevators" :key="elevator.id">
                                <i class='bx bx-building-house icon'></i>
                                <div class="label">{{elevator.name}}</div>
                                <el-tag :type="elevator.status === '运行中' ? 'success' : elevator.status === '维护中' ? 'warning' : 'danger'">
                                    {{elevator.status}}
                                </el-tag>
                                <div class="value">{{elevator.floor}}</div>
                                <div class="unit">当前楼层</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 故障代码及说明 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>故障代码及说明</span>
                        </div>
                        <el-table :data="faultCodes" style="width: 100%">
                            <el-table-column prop="elevator" label="电梯"></el-table-column>
                            <el-table-column prop="code" label="故障代码" width="100"></el-table-column>
                            <el-table-column prop="description" label="故障说明"></el-table-column>
                            <el-table-column prop="time" label="发生时间" width="160"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">
                                        {{scope.row.status}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 运行次数统计 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>运行次数统计</span>
                            <el-radio-group v-model="timeRange" size="small" style="float: right">
                                <el-radio-button label="day">日</el-radio-button>
                                <el-radio-button label="week">周</el-radio-button>
                                <el-radio-button label="month">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="chart-container">
                            <div style="color: #909399; text-align: center; line-height: 400px;">
                                此处显示运行次数统计图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 维保到期提醒 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>维保到期提醒</span>
                        </div>
                        <div v-for="maintenance in maintenanceReminders" :key="maintenance.id" class="maintenance-card">
                            <div class="maintenance-title">{{maintenance.elevator}} - {{maintenance.type}}</div>
                            <div class="maintenance-info">
                                <p>上次维保：{{maintenance.lastTime}}</p>
                                <p>下次维保：{{maintenance.nextTime}}</p>
                                <p>剩余天数：{{maintenance.daysLeft}}天</p>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>

            <!-- 数据记录标签页 -->
            <el-tab-pane label="数据记录" name="record">
                <div class="data-record">
                    <!-- 故障记录查询 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>故障记录查询</span>
                            <el-button style="float: right" type="text">导出记录</el-button>
                        </div>
                        <el-table :data="faultRecords" style="width: 100%">
                            <el-table-column prop="elevator" label="电梯"></el-table-column>
                            <el-table-column prop="faultType" label="故障类型"></el-table-column>
                            <el-table-column prop="startTime" label="开始时间"></el-table-column>
                            <el-table-column prop="endTime" label="结束时间"></el-table-column>
                            <el-table-column prop="duration" label="持续时间"></el-table-column>
                            <el-table-column prop="handler" label="处理人"></el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 维保记录查询 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>维保记录查询</span>
                            <el-button style="float: right" type="text">导出记录</el-button>
                        </div>
                        <el-table :data="maintenanceRecords" style="width: 100%">
                            <el-table-column prop="elevator" label="电梯"></el-table-column>
                            <el-table-column prop="type" label="维保类型"></el-table-column>
                            <el-table-column prop="time" label="维保时间"></el-table-column>
                            <el-table-column prop="operator" label="维保人员"></el-table-column>
                            <el-table-column prop="content" label="维保内容"></el-table-column>
                            <el-table-column prop="result" label="维保结果">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.result === '正常' ? 'success' : 'warning'">
                                        {{scope.row.result}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 困人记录统计 -->
                    <el-card class="record-card">
                        <div slot="header">
                            <span>困人记录统计</span>
                            <el-radio-group v-model="recordRange" size="small" style="float: right">
                                <el-radio-button label="year">年度</el-radio-button>
                                <el-radio-button label="quarter">季度</el-radio-button>
                                <el-radio-button label="month">月度</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="chart-container">
                            <div style="color: #909399; text-align: center; line-height: 400px;">
                                此处显示困人记录统计图表
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#elevator-system',
            data() {
                return {
                    activeTab: 'monitor',
                    timeRange: 'day',
                    recordRange: 'month',
                    elevators: [
                        { id: 1, name: '1号电梯', status: '运行中', floor: '12' },
                        { id: 2, name: '2号电梯', status: '运行中', floor: '8' },
                        { id: 3, name: '3号电梯', status: '维护中', floor: '1' }
                    ],
                    faultCodes: [
                        { elevator: '3号电梯', code: 'E001', description: '门机故障', time: '2024-01-20 14:30:00', status: '处理中' }
                    ],
                    maintenanceReminders: [
                        { 
                            id: 1, 
                            elevator: '1号电梯',
                            type: '月度维保',
                            lastTime: '2024-01-01',
                            nextTime: '2024-02-01',
                            daysLeft: 12
                        }
                    ],
                    faultRecords: [
                        {
                            elevator: '3号电梯',
                            faultType: '门机故障',
                            startTime: '2024-01-20 14:30:00',
                            endTime: '2024-01-20 15:30:00',
                            duration: '1小时',
                            handler: '张工'
                        }
                    ],
                    maintenanceRecords: [
                        {
                            elevator: '1号电梯',
                            type: '月度维保',
                            time: '2024-01-01',
                            operator: '李工',
                            content: '常规检查',
                            result: '正常'
                        }
                    ]
                }
            }
        })
    </script>
</body>
</html> 